<template>
	<div class="match-detail">
		<div style="width: 100%;height: 100%;overflow: auto;">
			<div v-if="notice" class="notice"><img src="http://qncdn.tissys.com/mobile/assets/img/notice.svg" alt="" class="imgicon"><a target="_blank"
				 :href="noticeConent">最新通知</a></div>
			<matchBattle class="battle" :matchs="battleList"></matchBattle>
			<div style="padding: 0.2rem;color: rgb(170, 170, 170);" v-if="battleList.length == 0">暂无数据</div>
		</div>
		<div v-if="battleList.length > 5" class="fixed" @click="scroll">
			<van-icon name="upgrade" />
		</div>
	</div>
</template>
<script>
	import {
		Icon
	} from 'vant';
	import tabs from "./components/tabs";
	import teamTabs from "./components/teamTabs";
	import roundSwiper from "./components/roundSwiper";
	import matchBattle from "../../../components/match/matchBattle";
	import matchEndSearch from "./components/matchEndSearch";
	import roundNumber from "./components/roundNumber";
	import roundForm from "./components/roundForm";
	export default {
		components: {
			tabs,
			teamTabs,
			roundSwiper,
			matchBattle,
			matchEndSearch,
			roundNumber,
			roundForm
		},
		data() {
			return {
				activeTab: 2,
				com_id: localStorage.getItem("index"),
				battleList: [],
				signForm: [],
				websock: null,
				group: "",
				name: "",
				match_date: "",
				slide: [],
				roundList: [],
				group_list: [],
				keys: [],
				title: this.$route.query.name,
				roundNum: 0,
				type: null,
				form: [],
				indexs: '',
				loop: [],
				num: 0,
				shows: true,
				formshow: true,
				tabList: ["战表","进行中", "已结束", "未开始", "签表"],
				status: [7,2, 3, 0, 100],
				offset: 0,
				noDate: false,
				ongoingpage: 0,
				ws: null,
				notice: false,
				noticeConent: null
			};
		},
		mounted() {
			this.initWebSocket();
			this.$store.commit('SET_MSG', this.$route.query.id)
			// this.com_id = localStorage.getItem("index")
			this.getNotice()
			// console.log(123456);
			console.log(this.$route.query.backhome=='true');
			if(this.$route.query.backhome=='true'){
				sessionStorage.setItem("isback", "back");
			}
			if(localStorage.getItem('index')){
				this.com_id = localStorage.getItem("index")
			}else{
				this.com_id = this.$route.query.back_id
			}
		},
		methods: {
			getNotice(com_id) {
				var params = new URLSearchParams();
				params.append("com_id", this.com_id);
				this.$axios
					.post("/mobile/matching/get_notice", params)
					.then(data => {
						if (data.data.code == 2000) {
							this.notice = true
							this.noticeConent = data.data.data[0]
						}
					})
					.catch(res => {});
			},
			initWebSocket(fn) {
				var _this = this;
				var ws = new WebSocket("ws://47.105.210.146:8080"); //正式服
				// var ws = new WebSocket("ws://47.104.64.239:8080"); //测试服
				ws.onopen = function() {
					var logindata =
						'{"type":"gaming","com_id":"' +
						_this.com_id +
						'","group_id":"' +
						_this.group +
						'","status":2,"match_date":"' +
						_this.match_date + '","search":"' + _this.name + '","page":""}';
					ws.send(logindata);
				};
				ws.onmessage = function(e) {
					var data = JSON.parse(e.data);
					switch (data.type) {
						case "ping":
							ws.send(
								'{"type":"gaming","com_id":"' +
								_this.com_id +
								'","group_id":"' +
								_this.group +
								'","status":2,"match_date":"' +
								_this.match_date + '","search":"' + _this.name + '","page":""}'
							);
							break;
						case "gaming":
							_this.battleList = data.gaming;
							console.log(_this.battleList)
							break;
					}
				};
				_this.$router.afterEach(function() {
					ws.close();
				});
			},
			scroll() {
				scrollTo(0, 0);
			}
		}
	};
</script>
<style scoped lang="less">
	.notice {
		background: #bce0cc;
		height: 0.8rem;
		display: flex;
		align-items: center;
		justify-content: center;

		.imgicon {
			margin-right: 0.1rem;
			vertical-align: middle;
		}

		a {
			color: #d81e06;
			display: inline-block;
			font-size: 0.31rem;
			font-weight: 700;
		}
	}

	.fixed {
		position: fixed;
		bottom: 50px;
		right: 10px;
		width: 30px;
		height: 30px;
		font-size: 26px;
	}

	.match-detail {
		margin-top: 0.8rem;
		margin-bottom: 1.1rem;
	}

	.tabs {
		position: fixed;
		top: 45px;
		z-index: 9999;
		width: 100%;
	}
</style>
